<template>
	<div id="citys">
		<mt-index-list>
			<mt-index-section v-for="(item,index) in city" :index="index">
				<li class="li" v-for="c in item" @click="Location(c.name)">{{c.name}}</li>
			</mt-index-section>
		</mt-index-list>
	</div>
</template>

<script>
	import axios from "axios";
	export default {
		created: function() {
			axios.get("http://m.maizuo.com/v4/api/city", {

			}).then(function(res) {
				this.data = res.data.data.cities;
				var obj={};
			    this.data.forEach(function(item,index){
			    	var p = item.pinyin[0];
			    	if(obj[p]==undefined){
			    		obj[p]=[];
			    	}
			    	obj[p].push(item);
			    })		    
			    var newArr = [];
			    newArr = Object.keys(obj).sort();
			    console.log(newArr)
			    var newObj={};
			    for(var i = 0;i<newArr.length;i++){
			    	//给新对象按照顺序添加属性，并且用已经分好的旧对象上获取值
			    	newObj[newArr[i]]=obj[newArr[i]];
			    }
			    console.log(newObj)
			    this.city=newObj;
			    console.log(obj)
			}.bind(this)).catch(function(err) {
				console.warn(err)
			});
		},
		methods:{
           Location: function(q) {
				this.$router.push({
					path: "/home",
				});
				this.$store.commit("toggleCity", q)
				this.$store.commit("toggleTitle", "首页")
				
			}
		},
		data:function(){
			return {
				data:"",
				city:{},
			}
		}
	}
</script>

<style lang="scss">
	#citys {
		position: absolute;
		top: 8vh;
		left: 0;
		width: 100%;
        .li{
        	padding: 5px;
        	background-color: white;
        }
	}
</style>